<template>
  <div>
    <leftmenu></leftmenu>
    <header-md text="CET-4" show="y"></header-md>
    <div id="content">
      <face></face>
    </div>

    <bar class="animated fadeInLeft" @click.native="go([$router,'/plan'])"></bar>

    <div class="info">
      <div class="list">
        <ul v-for="(item,index) in showList">
          <li>
            <p class="text-size-md">{{item.date}}</p>
            <div><span>{{item.info}}</span>   <span class="add">{{item.bean}} <span>{{item.add}}</span>  </span></div>
          </li>
        </ul>
      </div>
      <div class="more" @click="getmore"></div>
    </div>

    <countdown bigTitle="360 DAY"></countdown>
    <bottom-btn orangeUrl="/reviseBegin" greenUrl="/creatSelect" textGreen="继续计划" textOrange="复习" position="relative"></bottom-btn>

  </div>

</template>

<script>
  import {mapGetters, mapMutations } from 'vuex'
  import headerMd from '../components/header-md.vue'
  import bar from '../components/bar.vue'
  import countdown from '../components/countdown.vue'
  import bottomBtn from '../components/bottomBtn.vue'
  import leftmenu from '../components/leftmenu.vue'
  import face from '../components/face.vue'
  export default{
    data(){
      return {
        "list":[
          {
            "date":"2017-5-5",
            "info":"已完成",
            "bean":"经验",
            "add":"+30"
          },
          {
            "date":"2017-5-15",
            "info":"已完成",
            "bean":"经验",
            "add":"+30"
          },
          {
            "date":"2017-5-20",
            "info":"已完成",
            "bean":"经验",
            "add":"+30"
          },
          {
            "date":"2017-5-23",
            "info":"已完成",
            "bean":"经验",
            "add":"+30"
          },
          {
            "date":"2017-5-25",
            "info":"已完成",
            "bean":"经验",
            "add":"+30"
          },
          {
            "date":"2017-6-4",
            "info":"已完成",
            "bean":"经验",
            "add":"+30"
          },
          {
            "date":"2017-6-12",
            "info":"已完成",
            "bean":"经验",
            "add":"+30"
          },
          {
            "date":"2017-6-25",
            "info":"已完成",
            "bean":"经验",
            "add":"+30"
          }
        ],
        "showList":[],
        "currentLength":3,
        "allLength": 0
      }
    },
    components:{headerMd,bar,countdown,bottomBtn,leftmenu,face},
    computed:{
      ...mapGetters([
        'stime'
      ])
    },
    methods:{
      ...mapMutations([
        'go'
      ]),
        getmore:function(){
        if( this.currentLength >= this.allLength){
          alert('没有更多数据了');
          return;
        }
        let n = this.currentLength,m,data;
        if(n+3 > this.allLength){
          this.currentLength = this.allLength
        }else{
          m = n+3;
          this.currentLength = m;
        }
        data = this.list.slice(n,m);
        let length = data.length;
        for(let i=0;i<length;i++){
          this.showList.push(data[i])
        }
      }
    },
    mounted:function(){
      this.showList = this.list.slice(0,3);
      this.allLength = this.list.length;
//      重新进到首页的时候要更新所有的值 得在请求一次服务器  updateTimes 用来区别是否是第一次进入首页
//      如果是第一次进入首页在vuex里已经请求过了  可以在其它页面更改updateTimes 的值来让首页再次请求数据
      if(this.$parent.updateTimes == 0){
        var xmlhttp,state;
        xmlhttp = new XMLHttpRequest()
        xmlhttp.onreadystatechange=function () {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            state = JSON.parse(xmlhttp.responseText).data;
          }else{

          }
        }
        xmlhttp.open('GET','/api/users?time='+this.stime,false);
        xmlhttp.send();
        this.$store.state.percent = state.percent;
      }
      this.$store.commit('percentAdd');//这个是通过mutations 来改变$store.state里的值
    }
  }
</script>

<style lang="less" scoped>
  @import '../assets/css/variables.less';
  #content{
    padding:20px;
  }
  .more{
    height:50px;
    background: url('../assets/images/more.png') no-repeat center;
  }
  div.info{
    padding:20px;
    margin-top:20px;
  }
  div.info ul li{
    border:1px solid @green;
    margin-bottom:15px;
  }
  div.info ul li p{
    background:@green;
    padding:12px 10px;
    color:@white;
  }
  div.info ul li div{
    padding:15px 10px;
  }
  div.info ul li span.add{
    float:right;
  }
  div.info ul li span.add span{
    color:@orange;
  }
</style>
